<template>
<!-- 九宫格,无升序降序 -->
    <div class="town">
        <h3 class="title">
            <span>{{title}}</span>
            <span v-show="pageType=='tem-county'">
                <span style="float:left">各乡镇实况温度</span>
                <span style="float:left;color:#8FE799;">低温</span>
                <span style="float:left">排名</span>
            </span>
        </h3>
        <ul class="rank">
            <li v-for="(item,index) of rankes" :key="index" :style="{'background-image':'url(../../../../../static/images/actuallyMonitor/'+(index+1)+'.png)'}">
                <span v-show="(pageType=='tem-city'||pageType=='tem-county')&&index<3" style="font-size:2.2rem;display:block;margin:1.3rem 0 .5rem 0;">{{item.value}}{{unit}}</span>
                <span v-show="pageType=='rain-city'&&index<3" style="font-size:2.2rem;display:block;margin:1.3rem 0 .5rem 0;">{{item.value}}</span>
                <span v-show="pageType=='rain-city'&&index<3" style="display:block;">{{unit}}</span>
                <span v-show="pageType=='wind-city'&&index<3" style="font-size:2.2rem;display:block;margin:1.3rem 0 .5rem 0;">{{item.value}}</span>
                <span v-show="pageType=='wind-city'&&index<3" style="display:block;font-size:.8rem;">{{item.grade}}</span>
                <span v-show="index<3" :style="{'color':'#fff','display':'block','margin-top':pageType=='tem-county'?'1rem':'.5rem'}">{{item.name}}</span>
                <span v-show="index>2" style="color:#fff;display:block;margin:.8rem 0 .8rem 0">{{item.name}}</span>
                <span v-show="index>2" style="font-size:1.2rem;">{{item.value}}{{unit}}</span>
                <span v-show="pageType=='wind-city'&&index>2" style="font-size:.7rem;">{{item.grade}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{

    },
    data(){
        return{
            title:'',
            unit:'',//单位
            direction:'down',//排序
            rankes:[]
        }
    },
    methods:{
    },
    created(){
        if(this.pageType=='rain-city'){
            this.title = '各乡镇近24小时累计降雨量排名'
            this.unit = 'mm'
            this.rankes = [
                {name:'大同镇',value:16},
                {name:'乾潭镇',value:15},
                {name:'三都镇',value:14},
                {name:'藤桥镇',value:13},
                {name:'泽雅镇',value:12},
                {name:'大门镇',value:11},
                {name:'塘下镇',value:10.2},
                {name:'陶山镇',value:10.1},
                {name:'桐浦镇',value:9.2},
            ]
        }else if(this.pageType=='wind-city'){
            this.title = '各乡镇实况风速排名|m/s'
            this.unit = ''
            this.rankes = [
                {name:'大同镇',value:1.2,grade:'一级'},
                {name:'乾潭镇',value:1.2,grade:'一级'},
                {name:'三都镇',value:1.1,grade:'一级'},
                {name:'藤桥镇',value:1.0,grade:'一级'},
                {name:'泽雅镇',value:0.9,grade:'一级'},
                {name:'大门镇',value:0.8,grade:'一级'},
                {name:'塘下镇',value:0.8,grade:'一级'},
                {name:'陶山镇',value:0.7,grade:'一级'},
                {name:'桐浦镇',value:0.6,grade:'一级'},
            ]
        }else if(this.pageType=='tem-county'){
            this.unit = '℃'
            this.rankes = [
                {name:'大同镇',value:16},
                {name:'乾潭镇',value:15},
                {name:'三都镇',value:14},
                {name:'藤桥镇',value:13},
                {name:'泽雅镇',value:12},
                {name:'大门镇',value:11},
                {name:'塘下镇',value:10.2},
                {name:'陶山镇',value:10.1},
                {name:'桐浦镇',value:9.2},
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
    .town{
        width:98%;
        height:100%;
        background-image: url('../../../../../static/images/actuallyMonitor/bar.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
        .title{
            line-height:2.4rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            height:2.4rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:100%;
            margin-bottom:1.5rem;
            text-align:left;
            padding-left:1rem;
            box-sizing: border-box;
            position: relative;
        }
        .rank{
            flex:1;
            display:flex;
            flex-wrap: wrap;
            li{
                width:32%;
                background-repeat: no-repeat;
                background-size:100% 100%;
                margin:0 2% 2% 0;
                text-align:center;
                &:nth-child(3n){
                    margin-right: 0;
                }
                &:nth-child(-n+3){
                    height:7rem;
                }
                &:nth-child(n+4){
                    height:4.3rem;
                }
            }
        }
    }
</style>